<template>
  <div class="blog">
    <!-- 左边部分 -->
    <div class="blog-l">
      <div class="flex">
        <div class="flexImg">
          <img src="@/assets/hot/3.png" alt="">
        </div>
        <div class="flexCenter">
          前端开发
        </div>
        <div class="flexTime">
          加入时间: 2022-12-29
        </div>
        <div class="allImg">
          <div class="allImg-one" v-for="item in iconList" :key="item.id">
            <img :src="item.imgs" :title="item.titles" alt="">
          </div>
        </div>
      </div>
      <!-- 热门文章 -->
      <div class="hot">
        <div class="hotTitle">
          <h3>热门文章</h3>
        </div>
        <div class="hotBox">
          <ul>
            <li v-for="item in hotList" :key="item.id">
              <a :href="item.link" target="_blank">{{ item.title }}</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 最近文章 -->
      <div class="hot">
        <div class="hotTitle">
          <h3>最近文章</h3>
        </div>
        <div class="hotBox">
          <ul>
            <li v-for="item in latelyList" :key="item.id">
              <a :href="item.link" target="_blank">{{ item.title }}</a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 近期来访 -->
      <div class="hot">
        <div class="hotTitle">
          <h3>近期来访</h3>
        </div>
        <div class="hotBox">
          <div class="box" v-for="item in visitorList" :key="item.id">
            <div class="boxImg">
              <img :src="item.imgs" alt="">
            </div>
            <div class="boxName">
              <span>{{ item.name }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右边部分-文章列表 -->
    <div class="blog-r">
      <div class="header">
        <h3>博客-文章列表</h3>
      </div>
      <div class="rBox">
        <div class="ulBox">
          <ul>
            <li v-for="item in articleList" :key="item.id">
              <a :href="item.link" target="_blank">
                <div class="title">{{ item.title }}</div>
                <div class="row">{{ item.row }}</div>
                <div class="footer">
                  <span>点赞: {{ item.fabulous }}</span>
                  <span>阅读: {{ item.read }}</span>
                  <span>收藏: {{ item.Collection }}</span>
                  <span>评论: {{ item.comment }}</span>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import article from '@/utils/article'
export default {
  data(){
    return {
      iconList: [
        { id: 0, imgs: require('@/assets/home/1.jpg'), titles: '崭露头角' },
        { id: 1, imgs: require('@/assets/home/2.jpg'), titles: '炉火纯青' },
        { id: 2, imgs: require('@/assets/home/3.jpg'), titles: '博闻强识' },
        { id: 3, imgs: require('@/assets/home/4.jpg'), titles: '持之以恒' },
        { id: 4, imgs: require('@/assets/home/5.jpg'), titles: '挑战自我' },
        { id: 5, imgs: require('@/assets/home/6.jpg'), titles: '初学乍练' },
        { id: 6, imgs: require('@/assets/home/7.jpg'), titles: '新人报到' }
      ],
      hotList: [
        { id: 0, title: '腾讯云服务器如何发布网站(建议收藏)', link: 'https://mp.weixin.qq.com/s/d9PNZqdewCfszMFjiZ8kqQ' },
        { id: 1, title: '响应式布局的5种实现方式', link: 'https://mp.weixin.qq.com/s/XBbbVMc2LRvDHi_iJ-PgQA' },
        { id: 2, title: '高德地图的简单使用', link: 'https://mp.weixin.qq.com/s/mQqKu3egv6gRn9Zjdyhb3w' },
        { id: 3, title: 'JavaScript全解从0到1', link: 'https://mp.weixin.qq.com/s/Je0VVFZGdRlFJDtn5qTZrQ' },
        { id: 4, title: 'Screenfull全屏插件的使用', link: 'https://mp.weixin.qq.com/s/dBTIwckRhBpU7UsJiGhOMQ' },
        { id: 5, title: 'vue-quill-editor富文本编辑器的使用', link: 'https://mp.weixin.qq.com/s/GUDtbJrNZepJy0Rf1w0zRQ' },
      ],
      latelyList: [
        { id: 0, title: 'warn | <el-descriptions>did you register the component correctly', link: 'https://mp.weixin.qq.com/s/sHCEBwaUjqS237v60GRu6A' },
        { id: 1, title: '腾讯云服务器如何发布网站(建议收藏)', link: 'https://mp.weixin.qq.com/s/d9PNZqdewCfszMFjiZ8kqQ' },
        { id: 2, title: '响应式布局的5种实现方式', link: 'https://mp.weixin.qq.com/s/XBbbVMc2LRvDHi_iJ-PgQA' },
        { id: 3, title: '一行代码将网站变灰', link: 'https://mp.weixin.qq.com/s/btLA4B8DMubKHvpPpcbyhA' },
        { id: 4, title: '使用useTransition做个数字加载动画', link: 'https://mp.weixin.qq.com/s/o7tdzVc628ura0KzdBdvMw' },
        { id: 5, title: 'Git Gui 汉化', link: 'https://mp.weixin.qq.com/s/9sNlUImrLzl4MTJ07QhtHA' },
      ],
      visitorList: [
        { id: 0, imgs: require('@/assets/hot/1.png'), name: '凉遇初安' },
        { id: 1, imgs: require('@/assets/hot/2.png'), name: '听风说梦' },
        { id: 2, imgs: require('@/assets/hot/3.png'), name: '惜染' },
        { id: 3, imgs: require('@/assets/hot/4.png'), name: '花开似锦' },
        { id: 4, imgs: require('@/assets/hot/5.png'), name: '凉城深巷' },
        { id: 5, imgs: require('@/assets/hot/6.png'), name: '南辞清欢' }
      ],
      articleList: []
    }
  },
  mounted(){
    this.articleList = article
  }
}
</script>

<style lang="scss" scoped>
.blog {
  width: 100%;
  height: auto;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  .blog-l {
    width: 30%;
    height: auto;
    .flex {
      width: 100%;
      height: auto;
      padding: 20px;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      .flexImg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        margin: 20px auto;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .flexCenter {
        text-align: center;
        margin: 20px auto;
        font-size: 20px;
        font-weight: 700;
      }
      .flexTime {
        text-align: center;
        margin-bottom: 20px;
      }
      .allImg {
        height: auto;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding: 0 30px;
        .allImg-one {
          width: 40px;
          height: 40px;
          img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .hot {
      margin-top: 30px;
      height: auto;
      width: 100%;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      .hotTitle {
        padding: 18px 20px;
        border-bottom: 1px solid #e6ebf5;
        h3 {
          margin: 0;
          color: #333;
        }
      }
      .hotBox {
        height: auto;
        padding: 20px 0;
        display: flex;
        justify-content: space-evenly;
        flex-wrap: wrap;
        ul {
          margin: 0;
          padding: 0;
          width: 100%;
          height: auto;
          li {
            list-style: none;
            padding: 10px 20px;
            font-size: 14px;
            a {
              color: #17233f;
              &:hover {
                color: #559ce9;
              }
            }
          }
        }
        .box {
          width: 75px;
          height: 70px;
          margin: 16px 10px 15px;
          .boxImg {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            margin: 0 auto;
            img {
              border-radius: 50%;
              width: 100%;
              height: 100%;
            }
          }
          .boxName {
            margin-top: 10px;
            text-align: center;
            font-size: 12px;
          }
        }
      }
    }
  }
  .blog-r {
    width: 67%;
    height: auto;
    box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
    .header {
      padding: 18px 20px;
      border-bottom: 1px solid #e6ebf5;
      h3 {
        margin: 0;
      }
    }
    .rBox {
      padding: 20px;
      .ulBox {
        width: 100%;
        height: auto;
        ul {
          margin: 0px;
          padding: 0px;
          li {
            list-style: none;
            border-bottom: 1px solid #e6ebf5;
            padding: 20px 0;
            .title {
              font-size: 16px;
              font-weight: 700;
              margin: 10px 0px;
            }
            .row {
              font-size: 14px;
              margin-bottom: 10px;
              color: #6b7491;
              &:hover {
                color: #368ae2;
              }
            }
            .footer {
              font-size: 14px;
              margin-bottom: 10px;
              color: #6b7491;
              span {
                padding: 0 10px 0 0;
              }
            }
          }
        }
      }
    }
  }
}
</style>